<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
      <el-form size="small" :inline="true">
        <el-form-item>
          <el-input size="small" placeholder="请输入标签名称" v-model.trim="queryName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="addOrEditOption(1)" v-if="roleBtns.includes('sys:tag:save') || $store.getters.isAdmin">新建标签</el-button>
        <!-- <el-button type="danger">批量删除</el-button> -->
      </div>
      <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
        <el-table-column prop="name" label="标签名称">
          <template slot-scope="scope">
            <div class="text-ellipsis_2" :title="scope.row.name">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="count" label="标签绑定商品数"></el-table-column>
        <!-- <el-table-column prop="status" label="是否生效">
          <template slot-scope="scope"> <el-switch @change="updatatag(scope.row, scope.$index)" v-model="scope.row.status == 0 ? false : true" active-color="#13ce66" inactive-color="#ff4949"></el-switch></template>
        </el-table-column> -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="addOrEditOption(2, scope.row)" v-if="roleBtns.includes('sys:tag:save') || $store.getters.isAdmin">编辑</button>
            <button class="my-btn my-btn--mini my-btn--danger plain" @click="deleteOption(scope.row)" v-if="roleBtns.includes('sys:tag:remove') || $store.getters.isAdmin">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页面页脚 -->
    <div class="text-center">
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
        :page-size="pageSize" :layout="paginationLayout" :total="pageCount">
      </el-pagination>
    </div>

    <tag-form :visible.sync="isShowModel" :tag-id="editTagId" :tag-name="editTagName" @update="getPageDataList()"></tag-form>
  </div>
</template>

<script>
import Setting from '@/settings';
import { mapGetters } from 'vuex';
import tagForm from '@/views/store-management/components/tagForm';
import { GetStoreTagListByParams, DeleteStoreTagItem } from '@/views/store-management/services/index';

export default {
  name: 'StoreTag',
  components: { tagForm },
  data() {
    return {
      queryName: '',
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      pageIndex: 1,
      pageData: [],
      pageCount: 0,
      loading: false,
      isShowModel: false,
      editTagId: null,
      editTagName: null
    }
  },
  created() {
    this.getPageDataList();
  },
  computed: {
    ...mapGetters(['roleBtns'])
  },
  methods: {
    // 新增和编辑按钮
    addOrEditOption(type, row) {
      this.isShowModel = true;
      switch (type.toString()) {
        case '1':
          this.editTagId = null;
          this.editTagName = null;
          break;
        case '2':
          this.editTagId = row.id;
          this.editTagName = row.name;
          break;
        default:
          break;
      }
      return;
      this.$prompt('请输入标签名称', (type == 1 ? '新建' : '编辑') + '标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '最多输入10个字符',
        inputPattern: /^.{1,10}$/,
        inputErrorMessage: '最多输入10个字符',
        inputValue: (type == 1 ? null : row.name),
        closeOnClickModal: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            SaveStoreTagItem({
              id: (type == 1 ? null : row.id),
              name: instance.inputValue,
              // 用户ID之后需要修改
              creatorId: JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
            })
            .then(data => {
              if (data.code == 200) {
                this.$message.success((type == 1 ? '新建' : '修改') + '成功!');
                this.getPageDataList();
                done();
              } else {
                this.$message.success((type == 1 ? '新建' : '修改') + '失败!');
              }
              instance.confirmButtonLoading = false;
            })
            .catch(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      })
    },

    // 删除按钮
    deleteOption(row) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '加载中...';
            DeleteStoreTagItem({ id: row.id })
            .then(data => {
              instance.confirmButtonLoading = false;
              if (data.code == 200) {
                done();
                this.$message.success('删除成功!');
                this.getPageDataList();
              } else {
                this.$message.error('删除失败!');
              }
            })
            .catch(error => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      })
    },

    // 重置操作
    resetOption() {
      this.queryName = '';
      this.pageIndex = 1;
      this.getPageDataList();
    },

    // 获取页面列表数据
    getPageDataList() {
      this.loading = true;
      GetStoreTagListByParams({
        name: this.queryName,
        pageSize: this.pageSize,
        pageNum: this.pageIndex
      })
      .finally(() => this.loading = false)
      .then(data => {
        if (data.code == 200) {
          this.pageData = data.data.list;
          this.pageCount = data.data.total;

          if ((!data.data.list || !data.data.list.length) && this.pageIndex > 1) {
            this.pageIndex = 1;
            this.getPageDataList();
          }
        }
      })
    },
    // 分页列表改变
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getPageDataList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getPageDataList();
    }
  }
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
</style>
